<!-- 邮箱注册页面 -->
<template>
    <div id='register_container'>
        <!-- 标题 -->
        <div id="title_box">
            <div id="return_icon" @click="returnHandle"><img src="../public/return.png" alt="" srcset=""></div>
            <div id="title">注册</div>
        </div>
        <!-- 注册表单 -->
        <el-form :model="form" class="form_box" label-width="auto">
            <el-form-item label="邮箱:" class="email-form-item" style="display: flex; align-items: center;">
                <el-input v-model="form.email" placeholder="请输入邮箱" clearable style="flex: 1;" />
                <el-button plain style="margin-left: 10px;" @click="senderVerificationCode">验证</el-button>
            </el-form-item>
            <el-form-item label="验证码:">
                <el-input v-model="form.code" placeholder="请输入验证码" clearable />
            </el-form-item>
            <el-form-item label="昵称:">
                <el-input v-model="form.name" placeholder="请输入昵称" clearable />
            </el-form-item>
            <el-form-item label="密码:">
                <el-input v-model="form.password" placeholder="请输入密码" clearable type="password" show-password />
            </el-form-item>
            <el-form-item label="确认密码:">
                <el-input v-model="form.passwordConfirm" placeholder="请再次输入密码" clearable type="password"
                    show-password />
            </el-form-item>
        </el-form>
        <!-- 提交按钮 -->
        <div id="commit_btn">
            <el-button plain type="primary" style="width: 95px; height: 40px;" @click="commitHandle">提交</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from 'element-plus';
import axios from "../public/axiosConfig"

let form = ref({
    email: "",
    code: "",
    name: "",
    password: "",
    passwordConfirm: "",
})

// 发送验证码
async function senderVerificationCode() {
    // 检查输入的邮箱是否合法
    if (!isValidEmail(form.value.email)) {
        showMessage("error", "请检查邮箱输入");
        return 1;
    }

    // 合法,发送验证码到邮箱
    showMessage("success", "邮件发送成功!");
    const { data: res } = await axios.get(`/common/getEmailVerificationCode?emailAddress=${form.value.email}`);
    if (res.code == 0) {
        showMessage("error", '邮件发送中断,请重试!')
        return 1;
    }

}

// 提交处理器
function commitHandle() {
    // 鉴空
    for (let p in form.value) {
        if (form.value[p] == "") {
            showMessage("info", "请输入完整");
            return 1;
        }
    }

    // 验证密码和确定密码是否一致
    if (form.value.password != form.value.passwordConfirm) {
        showMessage("error", "两次密码输入不一致");
        return 1;
    }

    // 将用户信息和验证码传入后端验证
    execCommitHandle();
}

// 提交请求执行器
async function execCommitHandle() {
    const { data: res } = await axios.post(`/userInfos/register/${form.value.code}`, form.value);
    if (res.code == 0) {
        showMessage("error", "注册失败,请稍后重试!");
        return 0;
    }

    showMessage("success", "注册成功!")
    showMessage("success", "即将跳转!")

    setTimeout(() => {
        window.location.href = "/login/"
    }, 1500);
}

// 返回上一页
function returnHandle(){
    window.history.back();
}


// 通用消息提示函数
function showMessage(messageType, messageText) {
    ElMessage({
        message: messageText,
        type: messageType,
    })
}

// 判断邮箱格式的函数
function isValidEmail(email) {
    // 正则表达式，用于验证邮箱格式
    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return emailRegex.test(email);
}
</script>

<style scoped>
#register_container {
    max-width: 700px;
    box-sizing: border-box;
}

#title {
    font-size: 20px;
    text-align: center;
    padding: 14px 0px;
}

#commit_btn {
    display: flex;
    justify-content: center;
}

#return_icon {
    position: absolute;
    left: 13px;
    top: 24px;
}

#return_icon img {
    width: 23px;
}

/* #title_box{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
    width: 100%;
    background-color: #b9ebec;
} */

 .form_box{
    margin-top: 16px;
 }
</style>